import React from "react";
import {
  Input,
  Button,
  Spin,
  Space,
  Breadcrumb,
  Table,
  Tooltip,
  message,
} from "antd";
import { DownloadOutlined } from "@ant-design/icons";
import { connect } from "react-redux";

import "./exp.css";

import { _selStuExped, _selExpByName } from "../../../../utils/exp/index";

const { Search } = Input;
const url = require("../../../../utils/conUrl");

class Index extends React.Component {
  formRef = React.createRef();

  state = {
    isLoading: false,
    isDLoading: false,
    e_visible: false,
    exp_data: {},

    expList: null,
  };

  handleCancel = () => {
    this.setState({
      e_visible: false,
    });
  };

  componentDidMount = () => {
    this.getData();
  };
  getData = () => {
    this.setState({ isLoading: true });
    _selStuExped(this.props.state.data.stu_id)
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          this.setState({ isLoading: false });
          const expList = res.data.data;
          for (let i = 0; i < expList.length; i++) {
            expList[i].key = expList[i].exp_id;

            expList[i].exp_num = expList[i].exp_num;
            expList[i].exp_name = expList[i].exp_name;
            expList[i].exp_time = expList[i].exp_time;
            expList[i].exp_mark = expList[i].exp_mark;

            expList[i].control = expList[i].exp_id;
          }
          this.setState({ expList: expList });
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };
  selectOnSearch = (val) => {
    this.setState({ isLoading: true });
    let temp = {
      stu_id: this.props.state.data.stu_id,
      exp_name: val,
    };
    _selExpByName(temp)
      .then((res) => {
        if (res.status === 200 && res.data.code === 0) {
          this.setState({ isLoading: false });
          const expList = res.data.data;
          for (let i = 0; i < expList.length; i++) {
            expList[i].key = expList[i].exp_id;
            expList[i].exp_num = expList[i].exp_num;
            expList[i].exp_name = expList[i].exp_name;
            expList[i].exp_time = expList[i].exp_time;
            expList[i].exp_mark = expList[i].exp_mark;
            expList[i].control = expList[i].exp_id;
          }
          this.setState({ expList: expList });
        }
      })
      .catch(() => {
        this.setState({ isLoading: false });
        message.error("服务器错误");
      });
  };
  render() {
    const columns = [
      {
        title: "实验编号",
        dataIndex: "exp_num",
      },
      {
        title: "实验名称",
        dataIndex: "exp_name",
      },
      {
        title: "时间",
        dataIndex: "exp_time",
      },
      {
        title: "成绩",
        dataIndex: "exp_mark",
      },

      {
        title: "操作",
        dataIndex: "control",
        render: (text, record) => (
          <Space size="middle">
            {!record.stu_word ? null : (
              <Tooltip placement="topLeft" title="我的报告">
                <Button
                  type="dashed"
                  shape="circle"
                  icon={<DownloadOutlined />}
                  size="small"
                  href={url.api+"/file/word/" + record.stu_word}
                />
              </Tooltip>
            )}

            {!record.stu_data ? null : (
              <Tooltip placement="topLeft" title="我的附件">
                <Button
                  type="dashed"
                  shape="circle"
                  icon={<DownloadOutlined />}
                  size="small"
                  href={url.api+"/file/fj/" + record.stu_data}
                />
              </Tooltip>
            )}

            <Tooltip placement="topLeft" title="下载报告">
              <Button
                type="primary"
                shape="circle"
                icon={<DownloadOutlined />}
                size="small"
                href={url.api+"/file/word/" + record.exp_word}
              />
            </Tooltip>
          </Space>
        ),
      },
    ];

    return (
      <div>
        <div className="stu-header">
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            <Breadcrumb.Item>实验(已结束)</Breadcrumb.Item>
          </Breadcrumb>
          <Space>
            <Search
              placeholder="搜索实验名称"
              onSearch={this.selectOnSearch}
              enterButton
            />
          </Space>
        </div>

        <div className="admin-body" style={{ padding: 15, minHeight: 360 }}>
          <Spin tip="Loading..." spinning={this.state.isLoading}>
            <Table
              columns={columns}
              dataSource={this.state.expList}
              pagination={{ pageSize: 10 }}
            />
          </Spin>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    state: state.user,
  };
};
const actionCreator = {};
export default connect(mapStateToProps, actionCreator)(Index);
